/* 1、需要对象：设置不同颜色（奇偶行、鼠标移入行）
   2、显示文字：记录选中的数字
   3、第一个复选框：全选反选
   4、每行的复选框：单个选中或取消
   5、删除功能*/
// 获取元素对象
var body = document.getElementById('body');
// 每一行
var trs = body.getElementsByTagName('tr');
// 每行前面的复选框
var cb = body.getElementsByTagName('input');
// 删除按钮
var del = document.getElementById('btnDeleted');
// 全选/反选 复选框
var all = document.getElementById('all');
// 最上面一行文字
var txt = document.getElementById("txt");
// 1、自定义对象：设置不同颜色（奇偶行、鼠标移入行）
// 该对象包含：3个属性分别设置3种颜色，1个方法：给传入的参数对象设置颜色
var RowsColor = {
	/*odd:"gray",
	even:"white",
	selected:"red", */
	setColor: function(trs) {
		// 循环操作每一行
		for(var i = 0; i < trs.length; i++) {
			// 定义奇偶行原来的颜色
			trs[i].originColor = (i % 2 == 0 ? "white" : "gray");
			// 设置奇偶行颜色
			trs[i].style.background = trs[i].originColor;
			// 鼠标移入颜色
			trs[i].onmouseover = function() {
				this.style.background = "red";
			};
			// 鼠标移出颜色：原来的颜色
			trs[i].onmouseleave = function() {
				this.style.background = this.originColor;
			}
		}
	}
};

function dispalyNumber() {
	//邮件总数
	var total = trs.length;
	//选中的邮件数目
	var count = 0;
	for(var i = 0; i < cb.length; i++) {
		if(cb[i].checked) {
			count++;
		}
	}
	txt.innerHTML = "一共有" + total + "邮件，你选中了" + count + "封邮件";
}

function allSelect() {
	for(var i = 0; i < trs.length; i++) {
		cb[i].checked = this.checked;
	}
	dispalyNumber();
}
//删除功能
function deleteEvent(){
	for(var i=0;i<trs.length;i++){
		if (cb[i].checked) {
			trs[i].parentElement.removeChild(trs[i]);
			i--;
		}
	}
}
// 设置每一行颜色（3种）
RowsColor.setColor(trs);
//调用显示文字函数
dispalyNumber();
//给按钮添加功能
all.onclick = allSelect;
for(var i = 0; i < cb.length; i++) {
	cb[i].onclick = function() {
		dispalyNumber();
	}
}
//给删除按钮添加点击事件
del.onclick=deleteEvent;